<script setup lang="ts">
import { ClassApi } from '@/apis'
import LessonIndexList from '@/components/LessonIndexList.vue'

const props = defineProps<{
  data: ClassApi.ChangeRecordResp
}>()

const emit = defineEmits(['onRevokeSuccess'])

const onRevert = () => {
  uni.showModal({
    title: '提示',
    content: '确定要撤销该记录？',
    async success(res) {
      if (res.confirm) {
        await ClassApi.revertClassChange({ recordId: props.data.id })
        uni.showToast({
          title: '撤销成功',
          icon: 'none',
        })
        emit('onRevokeSuccess')
      }
    },
  })
}
</script>

<template>
  <view class="card">
    <view class="flex-row-between-center">
      <view class="flex-row-start-center">
        <text class="font-size-30rpx">
          {{ useDictLabel('ChangeTypeEnum', data.changeType) }}
        </text>
        <text class="ml-2 text-secondary">
          {{ data.createTime }}
        </text>
      </view>

      <view class="flex items-center">
        <view class="mr-2">
          <wd-button v-if="data.changeType === 'CHANGE_LESSON'" type="text" @click="onRevert">
            撤回
          </wd-button>
        </view>
        <view class="">
          <wd-tag v-if="true" color="#2176E7" bg-color="#E8F3FF">
            {{ useDictLabel('OperateStatusEnum', data.operateStatus) }}
          </wd-tag>
          <wd-tag v-else color="#F53F3F" bg-color="#FFECE8">
            操作失败
          </wd-tag>
        </view>
      </view>
    </view>
    <view class="wrapper mt-15rpx">
      <view class="flex-row-start-center">
        <wd-tag type="warning">
          转出
        </wd-tag>
        <view class="ml-1 flex-1 text-15px fw-500 leading-21px text-main">
          {{ data.originalClassInfo.name }}
        </view>
      </view>
      <view class="mt-20rpx flex-row-start-center">
        <wd-tag type="success">
          转入
        </wd-tag>
        <view class="ml-1 flex-1 text-15px fw-500 leading-21px text-main">
          {{ data.targetClassInfo.name }}
        </view>
      </view>
    <!-- <view class="mt-4px font-size-[24rpx] color-gray-5 line-1">
        <text>
          {{ data.originalClassInfo.arrangeTemplate.startDate }}~{{ data.originalClassInfo.arrangeTemplate.endDate }} ·
        </text>
        <text class="ml-1">
          {{ data.originalClassInfo.arrangeTemplate.arrangeTemplate.startTime }}-{{ data.originalClassInfo.arrangeTemplate.endTime }}
        </text>
      </view>
      <view class="mt-4px font-size-[24rpx] color-gray-5">
        {{ props.data.originalClassInfo.campusName }}·{{ data.originalClassInfo.leadTeacherName }}老师
      </view> -->
    </view>
    <!-- <view class="wrapper mt-[15rpx]"> -->
    <!-- <view class="mt-4px font-size-[24rpx] color-gray-5 line-1">
        <text>
          {{ props.data.inClassDetailResp.startDate }}-{{ props.data.inClassDetailResp.endDate }} ·
        </text>
        <text class="ml-1">
          {{ props.data.inClassDetailResp.startTime }}-{{ props.data.inClassDetailResp.endTime }}
        </text>
      </view>
      <view class="mt-4px font-size-[24rpx] color-gray-5">
        {{ props.data.inClassDetailResp.campusName }}{{ props.data.inClassDetailResp.classroomName }}
      </view> -->
    <!-- </view> -->
    <view class="wrapper mt-[15rpx]">
      <LessonIndexList :list="data.originalLessonIndexes" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .wrapper {
    background: #F7F8FA;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  :deep(.wd-tag__text) {
    font-size: 24rpx;
    line-height: 1;
    padding: 3px 4px;
  }
</style>
